<template>
	<view class="personal">
		<view class="list">
			<view class="list-item">
				<text>姓名</text>
				<view class="input">
					<input class="inputText" type="text" data-name="nickname" @input="input" :value="userData.nickname" placeholder="请填写姓名" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="list-item">
				<text>身份证号码</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="id_card"
						@input="input"
						:value="userData.id_card"
						placeholder="请填写您的身份证号码"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="pannel">
			<view class="title"><text>|&nbsp;支付方式</text></view>
			<view class="uploader">
				<view class="card">
					<view class="image" @tap="upload('card_front')">
						<block v-if="!userData.card_front">
							<image class="bg" src="../../../../static/idcard_1.png" mode="widthFix"></image>
							<image class="camera" src="../../../../static/camera.png" mode="widthFix"></image>
						</block>
						<block v-else><image class="bg" :src="userData.card_front" mode="widthFix"></image></block>
					</view>
					<view class="text">上传身份证正面</view>
				</view>
				<view class="card">
					<view class="image" @tap="upload('card_back')">
						<block v-if="!userData.card_back">
							<image class="bg" src="../../../../static/idcard_2.jpg" mode="widthFix"></image>
							<image class="camera" src="../../../../static/camera.png" mode="widthFix"></image>
						</block>
						<block v-else><image class="bg" :src="userData.card_back" mode="widthFix"></image></block>
					</view>
					<view class="text">上传身份证正面</view>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="list">
			<!-- <view class="list-item">
				<text>手机号</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="reg_address"
						@input="input"
						:value="userData.reg_address"
						placeholder="请填写手机号"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="list-item">
				<text>输入验证码</text>
				<view class="code">
					<input
						class="inputText"
						type="text"
						data-name="reg_address"
						@input="input"
						:value="userData.reg_address"
						placeholder="请填写验证码"
						placeholder-class="placeholder"
					/>
					<text>获取验证码</text>
				</view>
			</view> -->
			<view class="list-item">
				<text>银行卡号</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="bank_no"
						@input="input"
						:value="userData.bank_no"
						placeholder="请填写您的银行卡号"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
		</view>
		<view class="btn" v-if="userData.is_verfiy === null" @tap="submit()">提交审核</view>
		<view class="btn" v-if="userData.is_verfiy === 0">审核中</view>
		<view class="btn" v-if="userData.is_verfiy === 1">审核通过</view>
		<view class="btn" v-if="userData.is_verfiy === 2">不符合</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import config from '../../../../common/request/config.json';
export default {
	components: { uniIcons },
	data() {
		return {
			userData: {
				nickname: '',
				id_card: '',
				card_front: null,
				card_back: null,
				bank_no: '',
				is_verfiy: null
			}
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		upload(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original'],
				success: res => {
					let imagePath = res.tempFilePaths[0];
					uni.uploadFile({
						url: config.baseUrl + '/setting/uplodeImg',
						filePath: imagePath,
						name: 'file',
						success: uploadRes => {
							let data = JSON.parse(uploadRes.data);
							let url = data.data.list;
							this.userData[type] = url;
							console.log(this.userData);
						}
					});
				}
			});
		},
		async getData() {
			let res = await this.$request.get('/setting/setMemberPersonalCert', {});
			let data = res.data.data.list;
			if (data) {
				let { nickname, id_card, card_front, card_back, bank_no, is_verfiy } = data;
				this.userData = {
					nickname,
					id_card,
					card_front,
					card_back,
					bank_no,
					is_verfiy
				};
			}
		},
		input(e) {
			let name = e.target.dataset.name;
			let value = e.detail.value;
			this.userData[name] = value;
		},
		async submit() {
			let userData = this.userData;
			for (let key in userData) {
				if (!userData[key] && key != 'is_verfiy') {
					uni.showToast({
						title: '请将表单填写完整',
						duration: 2000
					});
					console.log(key);
					return false;
				}
			}
			let res = await this.$request.post('/setting/setMemberPersonalCert', {
				data: {
					...userData
				}
			});
			if (res.data.code == 10000) {
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 2000);
			} else {
				uni.showToast({
					title: '提交失败',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style lang="scss">
.personal {
	padding-bottom: 300upx;
}
.list {
	width: 100%;
	box-sizing: border-box;
	padding-left: 30upx;
	.list-item {
		width: 100%;
		height: 110upx;
		border-bottom: 2upx solid #e7e7e7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 20upx;
		font-size: $uni-font-size-base;
		color: #333333;
		.input {
			width: 500upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.inputText {
				color: #333333;
				font-size: $uni-font-size-base;
				width: 100%;
				text-align: right;
				box-sizing: border-box;
			}
		}
		.code {
			width: 500upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text {
				font-size: $uni-font-size-base;
				color: #f33131;
				height: 100%;
				line-height: 110upx;
			}
			.inputText {
				color: #333333;
				font-size: $uni-font-size-base;
				width: 300upx;
				text-align: right;
				box-sizing: border-box;
				padding-right: 30upx;
			}
		}
	}
}
.pannel {
	width: 100%;
	background-color: #ffffff;
	margin-top: 20upx;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 20upx;
	.title {
		width: 100%;
		color: #f34b32;
		line-height: 1.5em;
		font-size: $uni-font-size-lg;
	}
	.uploader {
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.image {
			width: 320upx;
			position: relative;
			.bg {
				width: 100%;
			}
			.camera {
				width: 80upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.text {
			line-height: 1.5em;
			font-size: $uni-font-size-base;
			color: #333333;
			text-align: center;
		}
	}
}
.placeholder {
	color: #d7d7d7;
}
.block {
	width: 100%;
	height: 20upx;
	background-color: #f5f6f7;
}
.btn {
	width: 600upx;
	margin: 0 auto;
	margin-top: 150upx;
	height: 100upx;
	line-height: 100upx;
	border-radius: 50upx;
	text-align: center;
	font-size: $uni-font-size-lg;
	color: #fff;
	background: linear-gradient(left, #ff5d42, #f33632);
}
</style>
